<template>
    <div class="flexbox flexcolumn height_100">
        <div class="flex over_box">
            <el-form ref="createform" :model="subFrom" label-position="top" class="create_form" :hide-required-asterisk='true' size="small">
                <div class="com_box">
                    <StepBox :dataForm="dataForm" />
                    <div class="pl_20 pr_20 hide_box">
                        <div class="tk_title" style="margin-top:-20px">发布方式</div>
                        <CreatType :subFrom="subFrom" />
                    </div>
                </div>
                <div class="com_box mt_12">
                    <div class="pl_20 pr_20 hide_box">
                        <div class="tk_title">发布设置</div>
                        <TkTaskCount :dataForm="dataForm" :subFrom="subFrom" />
                        <TkTaskName :subFrom="subFrom"/>
                        <TkTaskTime :subFrom="subFrom"/>
                        <TkTaskType :subFrom="subFrom"/>
                    </div>
                    <div class="pl_20 pr_20 pb_20 mt_12 hide_box">
                        <div class="tk_title">预览</div>
                        <TkViewUser :dataForm="dataForm"/>
                        <TkViewBd :dataForm="dataForm" :subFrom="subFrom"/>
                        <TkViewDel :dataForm="dataForm"/>
                        <TkViewDir :dataForm="dataForm"/>
                        <TkViewCrt :dataForm="dataForm"/>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="tk_footer com_box mt_12">
            <el-button plain class="el-button-width plain_red" size="small" @click="cancelCreation">取消创建</el-button>
            <el-button plain class="el-button-width" size="small" @click="preStep">上一步</el-button>
            <el-button type="primary" class="el-button-width" size="small" :disabled="loading" :loading="loading" @click="nextOne('createform')">发布广告</el-button>
        </div>
    </div>
</template>

<script>
import "@/assets/css/tiktok.css";
import {mixins} from '@/assets/js/tkmixins.js'
import StepBox from "./model/StepBox";
import TkTaskCount from "./model/TkTaskCount";
import TkTaskName from "./model/TkTaskName";
import TkTaskTime from "./model/TkTaskTime";
import TkTaskType from "./model/TkTaskType";
import TkViewUser from "./model/TkViewUser";
import TkViewBd from "./model/TkViewBd";
import TkViewDel from "./model/TkViewDel";
import TkViewDir from "./model/TkViewDir";
import TkViewCrt from "./model/TkViewCrt";
import CreatType from './model/CreatType'
export default {
    props: ["dataForm"],
    mixins: [mixins],
    components: {
        StepBox,
        TkTaskCount,
        TkTaskName,
        TkTaskTime,
        TkTaskType,
        TkViewUser,
        TkViewBd,
        TkViewDel,
        TkViewDir,
        TkViewCrt,
        CreatType
    },
    name: "",
    data() {
        return {
            loading:false,
            subFrom: {
                base:{},
                campaign:{},
                adgroup:{},
                creatives_base:{},
                name: "任务名称",
                execution_time: "",
                source:"",
                gap_time:0,
                crea_type:2
            },
        };
    },
    created() {
        let new_form = JSON.parse(JSON.stringify(this.dataForm))
        this.subFrom.advertiser_ids = new_form.advertiser_ids
        this.subFrom.base.objective_type = new_form.base[0].objective_type
        this.subFrom.base.advertiser_id = new_form.base[0].advertiser_id
        this.subFrom.base.campaign_product_source = new_form.base[0].campaign_product_source
        this.subFrom.base.store_id = new_form.base[0].store_id
        this.subFrom.base.store_authorized_bc_id = new_form.base[0].store_authorized_bc_id
        this.subFrom.base.identity_authorized_bc_id = new_form.base[0].identity_authorized_bc_id
        this.subFrom.base.identity_id = new_form.base[0].identity_id
        this.subFrom.base.identity_type = new_form.base[0].identity_type
        this.subFrom.base.catalog_id = new_form.base[0].catalog_id
        this.subFrom.base.catalog_authorized_bc_id = new_form.base[0].catalog_authorized_bc_id
        this.subFrom.campaign.operation_status = new_form.campaign.operation_status
        this.subFrom.campaign.campaign_name = new_form.campaign.campaign_name
        this.subFrom.campaign.budget_mode = new_form.campaign.budget_mode
        this.subFrom.campaign.budget = new_form.campaign.budget
        this.subFrom.campaign.campaign_product_source = new_form.campaign.campaign_product_source
        this.subFrom.campaign.campaign_id = new_form.campaign.campaign_id
        this.subFrom.adgroup.adgroup_name = new_form.adgroup.adgroup_name
        this.subFrom.adgroup.operation_status = new_form.adgroup.operation_status
        this.subFrom.adgroup.placements = new_form.adgroup.placements
        this.subFrom.adgroup.comment_disabled = new_form.adgroup.comment_disabled
        this.subFrom.adgroup.video_download_disabled = new_form.adgroup.video_download_disabled
        this.subFrom.adgroup.promotion_type = new_form.adgroup.promotion_type
        this.subFrom.adgroup.shopping_ads_type = new_form.adgroup.shopping_ads_type
        this.subFrom.adgroup.product_source = new_form.adgroup.product_source
        this.subFrom.crea_type = new_form.crea_type
        let delivery = []//预算与出价
        for(let i in new_form.adgroup.delivery){
            delivery.push({
                budget:new_form.adgroup.delivery[i].budget,
                delname:new_form.adgroup.delivery[i].delname,
                budget_mode:new_form.adgroup.delivery[i].budget_mode,
                schedule_type:new_form.adgroup.delivery[i].schedule_type,
                schedule_start_time:new_form.adgroup.delivery[i].schedule_start_time,
                schedule_end_time:new_form.adgroup.delivery[i].schedule_end_time,
                dayparting:new_form.adgroup.delivery[i].dayparting,
                optimization_goal:new_form.adgroup.delivery[i].optimization_goal=='CONVERT1'?'CONVERT':new_form.adgroup.delivery[i].optimization_goal,
                optimization_event:new_form.adgroup.delivery[i].optimization_event,
                deep_bid_type:new_form.adgroup.delivery[i].deep_bid_type,
                roas_bid:new_form.adgroup.delivery[i].roas_bid,
                bid_type:new_form.adgroup.delivery[i].bid_type,
                bid_price:new_form.adgroup.delivery[i].bid_price,
                conversion_bid_price:new_form.adgroup.delivery[i].conversion_bid_price,
                pacing:new_form.adgroup.delivery[i].pacing,
                billing_event:new_form.adgroup.delivery[i].billing_event,
            })
        }
        this.subFrom.adgroup.delivery = delivery
        let audience = []//定向
        for(let i in new_form.adgroup.audience){
            audience.push({
                audname:new_form.adgroup.audience[i].audname,
                location_ids:new_form.adgroup.audience[i].location_ids.map(item=>{return item.location_id}),
                audience_ids:new_form.adgroup.audience[i].all_audience.filter(item=>{return item.audience_type=='INCLUDE'}).map(item=>{return item.audience_id}),
                excluded_audience_ids:new_form.adgroup.audience[i].all_audience.filter(item=>{return item.audience_type=='EXCLUDE'}).map(item=>{return item.audience_id}),
                interest_category_ids:new_form.adgroup.audience[i].interest_category_ids.map(item=>{return item.interest_category_id}),
                interest_keywords_ids:new_form.adgroup.audience[i].interest_keywords_ids,
                age_groups:new_form.adgroup.audience[i].age_groups,
                operating_systems:new_form.adgroup.audience[i].operating_systems,
                gender:new_form.adgroup.audience[i].gender,
                languages:new_form.adgroup.audience[i].languages,
                actions:new_form.adgroup.audience[i].actions
            })
        }
        for(let i in audience){
            for(let a in audience[i].actions){
                delete audience[i].actions[a].is_show
                if(audience[i].actions[a].action_category_ids.length==0){
                    delete audience[i].actions[a]
                }else{
                    if(audience[i].actions[a].action_scene=='HASHTAG_RELATED'){
                        audience[i].actions[a].action_category_ids = audience[i].actions[a].action_category_ids.map(item=>{return item.keyword_id})
                    }else{
                        audience[i].actions[a].action_category_ids = audience[i].actions[a].action_category_ids.map(item=>{return item.action_category_id})
                    }
                }
            }
            audience[i].actions = audience[i].actions.filter(Boolean)
        }
        this.subFrom.adgroup.audience = audience

        // 创意
        this.subFrom.creatives_base.operation_status = new_form.creatives_base.operation_status
        this.subFrom.creatives_base.ad_name = new_form.creatives_base.ad_name
        this.subFrom.creatives_base.ad_format = new_form.creatives_base.ad_format
        let creatives_class = []
        for(let i in new_form.creatives_base.creatives_class){
            creatives_class.push({
                creaname:new_form.creatives_base.creatives_class[i].creaname,
                call_to_action:new_form.creatives_base.creatives_class[i].call_to_action,
                card_type:new_form.creatives_base.creatives_class[i].card_type,
                card_tags:new_form.creatives_base.creatives_class[i].card_tags,
                card_show_price:new_form.creatives_base.creatives_class[i].card_show_price,
                item_group_ids:new_form.creatives_base.creatives_class[i].item_group_ids.map(item=>{return item.item_group_id}),
                vertical_video_strategy:new_form.creatives_base.creatives_class[i].vertical_video_strategy,
                creatives:new_form.creatives_base.creatives_class[i].creatives.map(item=>{return {
                    video_id:item.video_id || "",
                    image_ids:item.image_ids ||[],
                    tiktok_item_id:item.item_id || "",
                    ad_text:item.ad_text || "",
                    file_name:item.file_name || "",
                    dark_post_status:item.dark_post_status || undefined
                }}),
            })
        }
        this.subFrom.creatives_base.creatives_class = creatives_class
        console.log(new_form);
        console.log(this.subFrom);
    },
    
    methods: {
        // 提交添加
        nextOne(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let new_form = JSON.parse(JSON.stringify(this.dataForm))
                    console.log(this.dataForm)
                    new_form.step = 1
                    this.subFrom.source = JSON.stringify(new_form);
                    this.loading = true;
                    console.log(this.subFrom)
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl+"launch/TiktokLaunch/plan_make",
                        this.subFrom
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.loading = false;
                        this.$message({
                            message: "创建成功",
                            type: "success",
                        });
                        this.$router.push({
                            path: "/tk_taks_list",
                        });
                        sessionStorage.removeItem("tkForm");
                    }
                } else {
                    this.$message.error("请完善信息！");
                    return false;
                }
            });
        },

        sessionSave() {
            window.sessionStorage.setItem(
                "tkForm",
                JSON.stringify(this.dataForm)
            );
        },

        // 上一步
        preStep() {
            this.dataForm.step = 4;
            this.sessionSave();
        },
    },
};
</script>


<style scoped>
.hide_box {
    overflow: hidden;
}
</style>

